<template>
    <div>
        <van-form @submit="onSubmit">
            <div class="form_box">
                <div class="form_item">
                    <div class="title">社会时间/活动经历</div>
                    <div class="form_item_content">
                        <div class="item_title">项目名称</div>
                        <div class="item_input">
                            <van-field class="input_content" v-model="form.practiceName" name="practiceName" :rules="[{ required: true, message: '' }]" placeholder="请输入企业名称" />
                        </div>
                    </div>

                    <div class="form_item_content">
                        <div class="item_title">项目时间</div>
                        <div class="item_input item_input_small">
                            <van-field class="input_item input_small" v-model="form.beginTime" name="beginTime" :rules="[{ required: true, message: '' }]" readonly clickable
                                @click="dateShow = true" placeholder="开始时间" />
                            <van-popup v-model="dateShow" position="bottom">
                                <van-datetime-picker type="date"
                                    @confirm="onDateConfirm($event, 'beginTime', 'dateShow')"
                                    @cancel="dateShow = false" 
                                    title="选择年月日" />
                            </van-popup>
                            <span class="line">-</span>
                            <van-field class="input_item input_small" name="endTime" :rules="[{ required: true, message: '' }]" v-model="form.endTime" readonly clickable
                                @click="endDateShow = true" placeholder="结束时间" />
                            <van-popup v-model="endDateShow" position="bottom">
                                <van-datetime-picker type="date"
                                    @cancel="endDateShow = false"
                                    @confirm="onDateConfirm($event, 'endTime', 'endDateShow')" />

                            </van-popup>
                        </div>
                    </div>
                    <div class="form_item_content">
                        <div class="item_title">项目描述</div>
                        <div class="item_input">
                            <van-field class="input_content_textarea" maxlength="2000"
                                :autosize="{ maxHeight: 240, minHeight: 240 }" :rules="[{ required: true, message: '请填写项目描述' }]" show-word-limit type="textarea"
                                name="practiceDescription" v-model="form.practiceDescription" placeholder="更完善的项目信息有助于HR快速找到你，为保护个人隐私，请不要填写手机号、QQ. 微信等联系方式" />
                        </div>
                    </div>

                </div>
            </div>

            <div style="margin: 0 0.10rem;">
                <van-button class="submmit_btn" round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>


import moment from 'moment'
export default {
    // 组件名称
    name: "demo",
    // 组件参数 接收来自父组件的数据
     props: {
        itemData: {
            type: Object,
            default: () => { }
        }
    },

    // 局部注册的组件
    components: {
    },
    data() {
        return {

            gradeShowPicker: false,
            educationShowPicker: false,
            dateShow: false,
            endDateShow: false,
            value: '',
            education: [], // 学历
            gradeColumns: [], // 年级
 
            postsStatus: [
                {
                    label: '正在实习',
                    children: [
                        { label: '随时入职', value: '随时入职' },
                        { label: '2周内入职', value: '2周内入职' },
                        { label: '时间待定', value: '时间待定' },
                    ]
                },
                {
                    label: '暂无实习',
                    children: [
                        { label: '随时入职', value: '随时入职' },
                        { label: '2周内入职', value: '2周内入职' },
                        { label: '时间待定', value: '时间待定' },
                    ]
                }
            ],
            form: {
                educationalBackground: '', // 学历
                intakeTime: '',
                diploma: '', // 证书
                grade: '',
                graduateTime: '',
                major: '', // 专业
                schoolName: '',
                isOverseasStudy: '', // 海外
            }

        }
    },
    created() {
    },
     mounted() {

        this.setForm()
    },
    methods: {
        setForm() {

            setTimeout(() => {
                console.log('进来了', this.itemData)
                this.form = this.itemData
                if (this.itemData.isAdd == 'add') {
                    return
                }
            })
        },
        onSubmit(val) {
            console.log(val)
            this.$emit("onItemData", JSON.stringify(this.form))
        },
        // 时间组件
        onDateConfirm(e, formItem, dataShow) {
            console.log(e, formItem, dataShow)

            this.form[formItem] = moment(e).format("YYYY-MM-DD")
            this[dataShow] = false
            console.log(moment(e[0]).format("YYYY-MM-DD"))

        },
        // 年级
        onGradeConfirm(e, i, o, v) {
            this.form.gradeName = e.label
            this.form.gradeValue = e.value
            console.log(e, i, o, v)

        },
        onConfirmAreaDict(val, va, vvv) {
            console.log(val, va, vvv)
            this.form.expectedIndustry = this.areaDict[va[0]].children[va[1]]
            this.areaDictShowPicker = false

            console.log(val, va, vvv)
        },
    }
}
</script>

<style lang="less" scoped>
.form_box {
    padding: 0 0.10rem 0.49rem;

    .form_item {
        .title {
            font-size: 0.16rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            margin-top: 0.15rem;
            color: #37383D;
            line-height: 0.22rem;
        }

        .form_item_content {
            border-bottom: 1px solid #E6E6E6;

            .item_title {
                display: flex;
                font-size: 0.14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                margin-top: 0.15rem;
                margin-bottom: 0.1rem;
                color: #37383D;
                line-height: 0.2rem;

            }

            .item_input {
                display: flex;
                align-items: center;

                &.item_input_small {
                    padding-bottom: 0.10rem;
                }

                .input_content {
                    flex: 1;
                    font-size: 0.13rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    padding-left: 0;
                    color: #B0B0B0;
                    line-height: 0.18rem;
                }

                .input_content_textarea {
                    // height: 2.4rem;
                    line-height: 0.20rem;
                    border-radius: 0.02rem;
                    border: 1px solid #F0F0F0;
                    margin-top: 0.10rem;
                }

                .select_btn {
                    font-size: 0.13rem;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #2F8EFE;
                    line-height: 0.18rem;

                }

                .input_item {
                    flex: 1;

                }

                .input_small {
                    border-radius: 2px;
                    border: 1px solid #F0F0F0;
                }

                .line {
                    // width: 0.20rem;
                    text-align: center;
                    width: 0.09rem;
                    // height: 20px;
                    margin: 0 0.14rem;
                    font-size: 0.14rem;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #37383D;
                    line-height: 0.20rem;
                }
            }

        }

    }

}

.show_tast {
    height: 18px;
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FC9C21;
    line-height: 18px;
    margin-bottom: 0.15rem;
}

.submmit_btn {
    height: 0.55rem;
    background: #3D6CB0;
    border-radius: 0.05rem;
    font-size: 0.18rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 0.25rem;
}
</style>